<template>
  <div>
      <!-- 动态组件的使用 -->
        <div v-for="item in listData" :key="item.id">
            <!-- :is 绑定的组件名 -->
            <!-- <keep-alive></keep-alive> 保留当前状态-->
            <keep-alive>
                <component :is="item.type"></component>               
            </keep-alive>
        </div>
  </div>
</template>

<script>
import newData from "../data/news";
import newsImage from "./newsImage";
import newsText from "./newsText";
import newsVideo from "./newsVideo";
export default {
    name: "App",
    data(){
        return{
            newData,
            type:'newsVideo'
        }
    },
    computed:{
        listData(){
            return this.newData.map(v=>{
                return{
                    ...v,
                    type:'news-'+v.type
                }
            })
        }
    },
    components: {
        newsVideo,
        newsText,
        newsImage
    },
};
</script>

<style>

</style>